<template>
<!-- 添加商品 -->
  <div>
    <el-card>
      <div slot="header">
          <span>添加商品</span>
      </div>
      <div class="content">
        <el-form :model="goodsForm" status-icon :rules="rules" ref="goodsForm" label-width="100px">
         <el-form-item label="商品名称" prop="name">
           <el-input v-model="goodsForm.name" autocomplete="off" placeholder="请输入商品名称"></el-input>
         </el-form-item>
         <el-form-item label="商品分类" prop="category">
          <el-select v-model="goodsForm.category" placeholder="请选择商品分类">
            <el-option :label="item" :value="item" v-for="item in cateList" :key="item"></el-option>
          </el-select>
         </el-form-item>
         <el-form-item label="商品价格" prop="price">
            <el-input-number v-model="goodsForm.price" :precision="2" :min="min" ></el-input-number>
         </el-form-item>
         <el-form-item label="商品图片" prop="imgUrl">
           <el-upload
            class="avatar-uploader"
            :action="action"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="goodsForm.imgUrl" :src="goodsForm.imgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
         </el-form-item>
         <el-form-item label="商品描述" prop="goodsDesc">
         <el-input type="textarea" v-model="goodsForm.goodsDesc" placeholder="请输入商品描述"></el-input>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="submitForm" size="mini">添加商品</el-button>
         </el-form-item>
        </el-form>
      </div>

    </el-card>
  </div>
</template>

<script>
import {goodsCategories,goodsAdd} from '@/api/goods'
export default {
  data(){
    return{
      action:"http://127.0.0.1:5000/goods/goods_img_upload",//商品上传头像提交地址
      min:0,//最低价格
      cateList:[],//商品分类数组
      goodsForm:{
        name:"",//商品名称
        category:"",//商品分类
        price:"",//商品价格
        imgUrl:"",//商品图片名字
        goodsDesc:"",//商品描述
        
      },//表单内容
       //验证规则
      rules: {
        //账号的
          name: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
          ],
          category: [
            { required: true, message: '请选择商品分类', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入商品价格', trigger: 'blur' },
          ],
          imgUrl: [
            { required: true, message: '请选择商品图片名字', trigger: 'blur' }
          ],
          goodsDesc: [
            { required: true, message: '请输入商品描述', trigger: 'blur' }
          ],
         
  
        },
    }
  },
  //方法
  methods:{
    //添加按钮
    submitForm(){
        this.$refs.goodsForm.validate(async(valid)=>{
          if(valid){
            let res = await  goodsAdd(this.goodsForm)//等一下判断成功还是失败
            let {code,msg}=res;
            if(code==0){
              this.$message({
              message: msg,
              type: "success",
            });
            //添加成功 跳商品列表
            this.$router.push("/goods/goods-list")
            }else{
              this.$message.error(msg);
            }
          }else{

          }
        })
    },
    //上传成功
    handleAvatarSuccess(res){
      // console.log(res);//响应信息
      //显示上传的图片 回填显示
      this.goodsForm.imgUrl=res.imgUrl

    },
    //商品图片上传成功之前的处理函数  设置上传规则
    beforeAvatarUpload(file){
        const isJPG = file.type === 'image/jpeg'||file.type === 'image/png'||file.type === 'image/gif'||file.type === 'image/webp';
        const isLt2M = file.size / 1024 / 1024 < 10;

        if (!isJPG) {
          this.$message.error('头像图片仅支持 JPG|PNG|GIF|WEBP 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 10MB!');
        }
        return isJPG && isLt2M;

    }

  },
  //生命周期
  async created(){
    //获取所有启用的分类名称
    let res =await goodsCategories()
    // console.log(res);//结果:商品分类数组
    this.cateList=res;
    
  }
};
</script>

<style lang="less" scoped>
.content{
  width: 600px;
}
.el-select {
  width: 100%;
}

//头像样式
 /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 128px;
    height: 128px;
    line-height: 128px;
    text-align: center;
  }
  .avatar {
    width: 128px;
    height: 128px;
    display: block;
  }
</style>